<template>
	<view>
		<view style="display: flex; color: #FFCC00; height: 80rpx; line-height: 80rpx;">
			<view @click="back" style="padding-top: 10rpx;"><u-icon name="arrow-left"  size="60"></u-icon></view>
			<view style="font-size: 38rpx; margin-left: 236rpx; font-weight: 900;">富同商城</view>
		</view>
		<view class="header"  @click="navTo('/pages/search/search')">
			<view class="icon">
			</view>
			<view class="search">
				<text class="mix-icon icon-sousuo"></text>
				<input type="text" value="" placeholder="请输入搜索内容" style="line-height: 50rpx; height: 70rpx;" @focus="search"/>
			</view>
			<view class="icon">
				<text class="mix-icon icon-saoma"></text>
			</view>
		</view>
		<swiper class="banner" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item>
				<view class="swiper-item">
					<image src="../..//static/shop/1595833354066324005.jpg" mode=""></image>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<image src="../../static/shop/1595833443068049276.jpg" mode=""></image>
				</view>
			</swiper-item>
		</swiper>
		<!--  导航 -->
		<view class="lists">
			<view class="list" :class="{active:current==index}" v-for="(item,index) in list" :key="index" @click="router('/Shop/zhuanqu/zhuanqu',item)">
				<view class="icon">
					<image class="img" :src="'../../static/shop/icon'+(index+1)+'.png'" mode=""></image>
				</view>
				<view class="text">
					{{item.title}} 
				</view>
			</view>
		</view>
		<!-- 数据列表 -->
	<shop-list :data='data'></shop-list>

	</view>

</template>

<script>
	// import * as api from '../../common/http.interceptor.js'
	import shopList from '../../components/shopList/shopList.vue'
	export default {
		components:{
			shopList
		},
		data() {
			return {
				list: ['进口商品', '精品服饰', '户外健康', '家电办公', '食品茶酒', '汽车用品', '实用家居', '母婴玩具', '手机数码', '美容洗护'],
				current:null,
				data:'你打算的'
			};
		},
		created() {
			this.$u.get('/prod/tagProdList').then(res =>{
				console.log(res.data)
				this.list = res.data
			}).catch((e) => {})
		},
		methods:{
			back(){
				uni.switchTab({
					url:'../../pages/index/index'
				})
			},
			// router(url) {
			// this.$u.route({
			// 	url: url
			// })
			// },
			search(){
				uni.navigateTo({
					url:'../search/search'
				})
			},
			router(url, data = null) {
				console.log(data);
				if (data == null) {
					this.$u.route({
						url: url
					})
				} else if (data.prodId != null || data.prodId != undefined) {
					console.log("详情");
					this.$u.route({
						url: url,
						params: {
							id: data.prodId
						}
					})
				} else {
					console.log("专区");
					this.$u.route({
						url: url,
						params: {
							id: data.id,
							name: data.title
						}
					})
				}
			
			},
			// current1(index){
			// 	if(index == 0){
			// 		uni.navigateTo({
			// 			url:'../zhuanqu/zhuanqu'
			// 		})
			// 	}
			// 	// if(index == 0){
			// 	// 	uni.navigateTo({
			// 	// 		url:'../address/address'
			// 	// 	})
			// 	// }
			// 	// if(index == 0){
			// 	// 	uni.navigateTo({
			// 	// 		url:'../address/address'
			// 	// 	})
			// 	// }
			// 	// if(index == 0){
			// 	// 	uni.navigateTo({
			// 	// 		url:'../address/address'
			// 	// 	})
			// 	// }
			// 	// if(index == 0){
			// 	// 	uni.navigateTo({
			// 	// 		url:'../address/address'
			// 	// 	})
			// 	// }
			// 	// if(index == 0){
			// 	// 	uni.navigateTo({
			// 	// 		url:'../address/address'
			// 	// 	})
			// 	// }
			// 	// if(index == 0){
			// 	// 	uni.navigateTo({
			// 	// 		url:'../address/address'
			// 	// 	})
			// 	// }
			// 	// if(index == 0){
			// 	// 	uni.navigateTo({
			// 	// 		url:'../address/address'
			// 	// 	})
			// 	// }
			// 	// if(index == 0){
			// 	// 	uni.navigateTo({
			// 	// 		url:'../address/address'
			// 	// 	})
			// 	// }
			// 	// if(index == 0){
			// 	// 	uni.navigateTo({
			// 	// 		url:'../address/address'
			// 	// 	})
			// 	// }
			// 	console.log(index)
			// 	// uni.request({
			// 	// 	url: 'https://192.168.1.47:9110/indexImgs',
			// 	// 	method: 'GET'
			// 	// 	//dataType: 'json',
			// 	// }).then(res =>{
			// 	// 	console.log(res)
			// 	// })
			// }
			
		}
	}
</script>

<style lang="scss">
	page{
		// background-color: #f0f0f0;
	}
	.header {
		display: flex;
		height: 90rpx;
		align-items: center;
		
		.icon {
			width: 90rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			.icon-saoma { font-size:40rpx}
		}
		.search {
			background: #eee;
			height: 66rpx;
			border-radius:33rpx;
			flex: 1;
			text-align: center;
			line-height: 66rpx;
			color: #999;
		}
	}
	.img {
		width: 100%;
		height: 100%;
	}

	.banner {
		height: 400rpx;
		width: 750rpx;

		.swiper-item {
			image {
				width: 100%;
			}
		}
	}

	.lists {
		width: 90%;
		margin: 40rpx auto;
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
		margin-bottom: 40rpx;

		.list {
			width: 16%;
			margin: 20rpx 10rpx;
			text-align: center;
			border-bottom: 6rpx solid rgba(0,0,0,0);
			
			.icon {
				margin: auto;
				text-align: center;
				width: 80rpx;
				height: 80rpx;
				margin-bottom: 10rpx;
			}

			.text {
				color: rgba(16, 16, 16, 100);
				font-size: 26rpx;
				font-weight: 550;
			}
		}
		& .active {
			border-bottom: 6rpx solid #FF9900;
		}
	}

	
.main{
	padding-top: 10rpx;
	background-color: #FFFFFF;
	.head {
		width: 90%;
		margin: 30rpx auto;
		display: flex;
	}
	.rows {
		width: 95%;
		margin: auto;
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;

		.row1{
			width: 40%;
			
			.image{
				width: 100%;
				height: 200rpx;
				border-radius: 15rpx 15rpx 0 0;
				image{
					border-radius: 15rpx 15rpx 0 0;
				}
			}
			.text{
				margin: 0;
				height: 90rpx;
				margin-bottom: 20rpx;
				background-color: #fff;
				.tit{
					padding: 10rpx 0 0 20rpx;
					font-size: 24rpx;
				}
				.money{
					color: rgba(247, 18, 5, 100);
					margin-left: 30rpx;
					margin-top: 5rpx;
					font-size: 24rpx;
					
				}
			}
		}
	}
	}
</style>
